import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Form,
  Input,
  Button,
  Checkbox,
  Message,
  Space,
} from '@arco-design/web-react'
import { IconLock, IconUser } from '@arco-design/web-react/icon'
import { login } from '@/api/auth'
import { useAuthStore } from '@/store/authStore'
import type { LoginRequest } from '@/types'
import './index.css'

const FormItem = Form.Item

export default function Login() {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()
  const setAuth = useAuthStore((state) => state.setAuth)

  const handleSubmit = async (values: LoginRequest) => {
    console.log('[Login] 提交登录表单:', values)
    setLoading(true)
    try {
      console.log('[Login] 调用登录API...')
      const response = await login(values)
      console.log('[Login] 登录API响应:', response)

      // 保存认证信息到 Store
      setAuth(response.user, response.accessToken, response.refreshToken)
      console.log('[Login] 认证信息已保存到Store')

      Message.success('登录成功')

      // 跳转到首页
      console.log('[Login] 准备跳转到首页...')
      navigate('/', { replace: true })
      console.log('[Login] 导航命令已执行')
    } catch (error) {
      console.error('[Login] 登录失败:', error)
      // 错误信息已在请求拦截器中处理
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="login-container">
      <div className="login-box">
        <div className="login-header">
          <h1 className="login-title">SumerCore DevOps</h1>
          <p className="login-subtitle">企业级 DevOps 自动化平台</p>
        </div>

        <Form
          form={form}
          layout="vertical"
          onSubmit={handleSubmit}
          autoComplete="off">
          <FormItem
            label="用户名"
            field="username"
            rules={[{ required: true, message: '请输入用户名' }]}>
            <Input
              prefix={<IconUser />}
              placeholder="请输入用户名"
              size="large"
              autoComplete="username"
            />
          </FormItem>

          <FormItem
            label="密码"
            field="password"
            rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password
              prefix={<IconLock />}
              placeholder="请输入密码"
              size="large"
              autoComplete="current-password"
            />
          </FormItem>

          <FormItem field="rememberMe">
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Checkbox field="rememberMe">记住我</Checkbox>
              <Button type="text" size="small">
                忘记密码？
              </Button>
            </Space>
          </FormItem>

          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              loading={loading}
              long>
              登录
            </Button>
          </FormItem>
        </Form>

        <div className="login-footer">
          <p>SumerCore DevOps &copy; 2025</p>
        </div>
      </div>
    </div>
  )
}
